<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.search" placeholder="请输入查询内容" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <el-table
      :data="list"
      border
      style="width: 100%;margin-top: 10px;"
    >
      <el-table-column
        prop="id"
        label="序号"
        min-width="20%"
      />
      <el-table-column
        prop="task_name"
        label="任务名"
        min-width="20%"
      />

      <el-table-column
        prop="device.name"
        label="设备"
        min-width="30%"
      />
      <el-table-column
        prop="content"
        label="详情"
        min-width="30%"
      />
      <el-table-column
        label="日志"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-button size="medium" type="warning" icon="el-icon-message" circle @click="handleLog(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        min-width="20%"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 'end'" type="success" disabled>任务完成</el-button>
          <el-button v-if="scope.row.status === 'working'" :loading="true" type="primary">执行中</el-button>
          <el-button v-if="scope.row.status === 'braking'" type="danger" disabled>任务强制结束</el-button>
          <el-button v-if="scope.row.status === 'exception'" type="info" disabled>任务异常</el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="执行时间"
        min-width="20%"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ format(scope.row.createtime) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="更新时间"
        min-width="20%"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ format(scope.row.updatetime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-dialog title="日志" :visible.sync="logVisible">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ logTitle }}</span>
        </div>
        <p style="white-space: pre-wrap;">{{ logContent }}</p>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskList } from '../../api/tiktok-task.js'
export default {
  data() {
    return {
      list: null,
      total: 0,

      listQuery: {
        page: 1,
        app: 'tiktok_task',
        search: ''
      },
      logVisible: false,
      logTitle: '',
      logContent: ''
    }
  },
  created() {
    this.getTaskList()
  },
  methods: {
    getTaskList() {
      this.listLoading = true
      getTaskList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getTaskList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getTaskList()
    },
    format(time) {
      return this.$tools.dateFormat('YYYY-mm-dd HH:MM', new Date(time * 1000))
    },
    handleLog(index, row) {
      this.logTitle = row.device.name
      this.logContent = row.log
      this.logVisible = true
    }

  }
}
</script>
